<template>
  <!-- 首页 -->
  <div class='PageWrap'>
    <!-- 页面入口 -->
    <div class="page-entry">
      <div class="entry-item tools" @click="router.push('/tool')">🔧</div>
      <div class="entry-item tools" @click="router.push('/train')">🌰</div>
      <div class="entry-item nomore">待定</div>
      <!-- <router-link tag="div" to="/tools" class="entry-item tools"><span>TOOL工具</span></router-link>
      <router-link tag="div" to="/404" class="entry-item nomore"><span>待定</span></router-link> -->
    </div>
  </div>
</template>
 
<script setup>
import { useRouter } from 'vue-router'

// 数据声明↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
const router = useRouter();              // 路由
// 数据声明↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 


// 函数方法声明↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
// 请求banner数据

// 跳转页面
function jumpPage(url) {
  router.push({ path: url })
}

</script>
 
<style lang='scss' scoped>
.PageWrap {
  color: #030303 !important;

  .page-entry {
    width: 80%;
    height: 100vh;
    font-size: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;

    &>.entry-item {
      border-radius: 30px;
      flex: 1;
      height: 40%;
      margin: 0 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 4px 4px 10px #96969693;
      cursor: pointer;
      transition: all .4s;
      position: relative;
      overflow: hidden;
      background-image: linear-gradient(var(--background-color) 0%, var(--background-color) 66%, transparent 100%);
      background-size: 100% 200%;
      background-repeat: no-repeat;
      background-position: 0% 0%;

      &:hover {
        transform: translateY(-6px);
        box-shadow: 4px 20px 20px #96969693;
        background-position: 0% 100%;
      }
    }

    .tools {
      --background-color: #ffae34;
    }

    .nomore {
      --background-color: #6D6D6D;
    }
  }
}
</style>